<template>
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <el-table :data="tableData" border class="table">
      <el-table-column
        v-for="(item, index) in list"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      />
    </el-table>
    <div v-if="isxian" class="button">
      <div class="button1">
        <el-button size="small ">X</el-button>
      </div>
      <div class="button2">
        <el-button size="small ">√</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "Biao",
  props: {
    isxian: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "标题"
    },
    tableData: {
      type: Array,
      default: function() {
        return [{ date: " " }, {}, {}, {}, {}]
      }
    },
    list: {
      type: Array,
      default: function() {
        return [
          {
            label: "建档人"
          },
          {
            label: "修改时间"
          },
          {
            label: "修改人"
          },
          {
            label: "统计年度"
          }
        ]
      }
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.diao()
  },
  methods: {
    diao() {}
  }
}
</script>

<style lang="scss" scoped>
* {
  height: 100%;
  width: 100%;
}
.el-button {
  color: white;
  background-color: transparent;
}
.button {

  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  background-color: transparent;
  .button1 {
    display: inline-block;
    height: 40px;
    width: 50px;
    background-color: transparent;
    margin-right: 10px;
  }
  .button2 {
    display: inline-block;
    height: 40px;
    background: transparent !important;
    width: 50px;
  }
}
.table {
  ::v-deep .el-table__header-wrapper {
    thead {
      th {
        div {
          font-size: 10px;
        }
      }
    }
  }
}
.el-table::before {
  background-color: transparent;
}
::v-deep .el-table__header tr,
::v-deep .el-table th,
.el-table tr {
  background-color: transparent;
}
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
  border: 0px;
  color: white;
}
.el-table--border th {
  // border: 0px;
}
.el-table th,
.el-table tr {
  background-color: transparent;
}
.el-table td,
.el-table th.is-leaf {
  border: 0px;
}
.el-table--border::after,
.el-table--group::after {
  width: 0px;
}
.cell {
  color: white;
}
.el-table td,
.el-table th {
  padding: 8px;
}

.el-table tbody tr:hover > td {
  background-color: unset !important;
}

</style>
<style lang="scss">

</style>
